Photo Sphere Viewer全景图插件开箱 |
您所在的位置：网站首页 › psv gpu crash解决 › Photo Sphere Viewer全景图插件开箱 |
Photo Sphere Viewer全景图插件开箱
| 简介
最新小编在了解全景图相关的知识。小编想通过该篇文章带大家一起开箱PhotoSphereViewer框架。 PhotoSphereViewer框架是基于Three.js二次封装的一个显示Photo Sphere全景照片的JavaScript库。从目前小编的学习情况来看，小编觉得这个框架挺强大的，是值得大家玩一玩的插件，万一哪天有类似的需求对吧。 利用PhotoSphereViewer框架我们可以做些什么呢？ 从动图中我们可以看到我们在一个div里面进行图片视区的切换，类似我们在操控一台摄像机的视角，从而观察图片里的不同位置的具体内容，并且我们可以在图片里面绘制想要的区域，并对绘制区域添加了相关的内容描述。 但是这个插件给我们提供的不仅仅只有这点东西，读者可以根据自己的需求去了解该插件给我们提供的其他内容。该篇文章主要是带大家开箱该插件，确保大家能顺利用上。 官方文档： photo-sphere-viewer.js.org/ PhotoSphereViewer开箱使用 插件引用 npm 安装 npm install photo-sphere-viewer 直接导入这里小编使用的是npm安装。 插件使用 HTML和CSS部分 // 全景图的根节点必须要具备宽高 #viewer { width: 100vw; height: 50vh; } JavaScript部分 import { Viewer } from 'photo-sphere-viewer'; // 必须引入官方提供的样式文件 import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'; import image from './assets/2294472375_24a3b8ef46_o.jpg'; const viewer = new Viewer({ // 全景图根节点 container: document.querySelector('#viewer'); // 全景图图片路径 panorama: image; })如果代码没有写错，一个全景图实例就已经被创建出来啦，这样子我们就可以开始愉快的使用官方提供的Viewer实例下的各种api了。 这里小编给大家提供两张练习使用的全景图，大家有需要自取即可。
至于该框架的实现原理及各种专业术语的含义，大家有兴趣的话自己去了解，这里小编其实也是学了个一知半解，对于原理并不是很明白，大家可以从three.js和WebGL相关知识入手，可以更好的理解该框架的实现原理。当然有什么疑问也可以留言问我，说不定我回答得上来嘿嘿嘿。祝大家玩的愉快。下面是我根据官方提供的api文档进行了实操并进行稍微的整理，大家有需要可以参考参考。 api参考Photo Sphere Viewer Viewer实例下的全部方法实操。 // 使用Photo Sphere Viewer必须引入相应的样式 import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'; // marker插件的样式(如果有使用到插件就必须引入) import 'photo-sphere-viewer/dist/plugins/markers.css'; const viewer = new Viewer({ container: document.querySelector('#container'), // 全景图 panorama: 'http://*******.jpg', }); animate(Object options)使用平滑的过度效果进行视图的缩放 options可传的参数： NameTypeArgumentDescriptionspeednumber|stringanimation speed or duration (in milliseconds)zoomnumberoptionalnew zoom level between 0 and 100 viewer.animate({ speed: 2000, zoom：88 }); stopAnimation()停止正在进行的动画。由于动画的停止是异步的，因此该方法会返回一个Promise。 viewer.stopAnimation().then(() => { // 此处写自己想要写的业务 }) destroy()销毁全景图viewer。目前该方法没办法完全清除内部使用的THREE框架上下文使用的内存。 viewer.destory(); enterFullscreen()进入全屏模式 viewer.enterFullscreen(); exitFullscreen()退出全屏模式 viewer.exitFullscreen(); getPlugin(pluginId)加载Photo Sphere Viewer 提供的其他插件，插件必须是官方提供的。该方法会返回插件的实例（如果存在） import MarkersPlugin from 'photo-sphere-viewer/dist/plugins/markers.js'; import { Viewer } from 'photo-sphere-viewer'; const viewer = new Viewer(); const plugin = viewer.getPlugin(MarkersPlugin); getPosition()获取相机的当前位置 const position = viewer.getPosition(); console.log(position); // { latitude: 0, longitude: 0 } getSize()获取当前查看器的宽度和高度的大小，会随着当前可视的container大小的改变而改变。 const size = viewer.getSize(); console.log(size); // { width: 762, height: 640 } getZoomLevel()获取当前缩放层级 const level = viewer.getZoomLevel(); console.log(level); // 50 isAutorotateEnabled()检查是否启用了自动旋转,如果在自动旋转为true,反之则为false const isAutorotate = viewer.isAutorotateEnabled(); console.log(isAutorotate); // false isFullscreenEnabled()检查是否开启全屏，全屏为true，反之则为false const isFullScreen = viewer.isFullscreenEnabled(); console.log(isFullScreen); // false needsUpdate()为下一次渲染标记视图已更改（用途未知） viewer.needsUpdate(); refreshUi()刷新界面（用法未知） viewer.refreshUi(); resize(Object size)调整全景图查看窗口的大小, 以下是size可选的参数配置 NameTypeArgumentDescriptionwidthstring单位可以是px,%或者autoheightstring单位可以是px,%或者auto viewer.resize({ width: '2000px', height: '1000px' }); rotate(Object position)将视图转到特定的经纬度。可以用球坐标（弧度或度数）或纹理坐标（px）表示位置。 NameTypeArgumentDescriptionlongitudenumberlatitudenumberxnumberynumber viewer.rotate({ longitude: 3.493520870365421, latitude: 0.0863177810938982 }); viewer.rotate({ x: 229, y: 968 }); setOption(option, value)更改Viewer的配置项，其中某些配置项不能被改变。 NameTypeDecriptionoptionstringpanorama, panoData, container, plugins不能被改变valueanyoption可配置的参数： NameTypedefaultDecriptioncaptionstring显示在导航栏中的文本。如果导航栏被禁用，它将一直显示，但没有按钮。允许HTML。loadingImgstring显示在全景图刚加载时loading圆的图像的路径。loadingTxtstringLoading...显示在全景图刚加载时loading圆中心的文本，仅在未配置loadingImg时有效。sizeobject全景图容器的最终大小，默认情况下使用的是人根结点的容器大小。在调整窗口大小的时候也会遵循该配置的大小。fisheyeboolean|doublefalse鱼眼模式，该模式会对markers标记物产生副作用。使用true启用鱼眼效果或指定效果强度(true = 1.0)minFovinteger30最小视野，介于1和179之间。最小视野大小应该小于最大视野大小。maxFovinteger90最大视野，介于1和179之间。最大视野大小应该大于最小视野大小。defaultZoomLvlinteger50默认的缩放层级。介于0（最大视野）和100（最小视野）之间。defaultLongdouble | string0视图加载时的默认的定位经度，介于0到2π之间defaultLatdouble | string0视图加载时的默认的定位维度，介于-π/2到π/2之间sphereCorrection{ pan: double, tilt: double, roll: double }{ pan:0, tilt:0, roll: 0 }球体旋转角度，以弧度为单位。pan: 绕x轴旋转，titl:绕y轴旋转，roll：绕z轴旋转。moveSpeeddouble1手动滑动的速度增加的倍数zoomButtonIncrementdouble2使用键盘或导航栏按钮时缩放增量。autorotateDelayintegernull用于定义自动旋转开始的延迟（毫秒）。暂时亲测不生效autorotateSpeedstring2rpm自动旋转的速度。单位为rpm。autorotateLatdouble | stringdefaultLat执行自动旋转的纬度。moveInertiabooleantrue在手动移动后启用平滑动画。(滑动全景图停下来之后的惯性)mousewheelbooleantrue是否使用鼠标滚轮进行缩放。mousewheelSpeeddouble1使用鼠标滚轮时的缩放速度。mousemovebooleantrue是否使用鼠标光标来进行全景旋转。captureCursorbooleanfalse只需在视图上方移动光标，而不是单击+移动，即可旋转全景。touchmoveTwoFingersbooleanfalse需要两个手指才能旋转全景图。如果启用，当仅检测到一次触摸时，会显示出要求用户使用两个手指的信息覆盖物。注意：该配置在PC端配置无效。useXmpDatabooleantrue从XMP数据中读取真实图像大小，如果在拍摄后裁剪了全景图，则必须保持为真。withCredentialsbooleanfalse对HTTP请求使用资格证书credentialsnavbararray['autorotate', 'zoomOut', 'zoomRange', 'zoomIn', 'download', 'caption', 'fullscreen']导航栏按钮的配置。除默认配置之外，导航栏也允许自定义添加按钮。langobjectlang: { autorotate: 'Automatic rotation', zoom : 'Zoom', zoomOut : 'Zoom out', zoomIn : 'Zoom in', download : 'Download',fullscreen: 'Fullscreen', menu: 'Menu', twoFingers: ['Use two fingers to navigate'], loadError : 'The panorama can't be loaded',}全景图里的各种文字提示内容。比如导航栏按钮的描述内容。keyboardboolean|objectkeyboard: { 'ArrowUp': 'rotateLatitudeUp', 'ArrowDown': 'rotateLatitudeDown', 'ArrowRight': 'rotateLongitudeRight', 'ArrowLeft': 'rotateLongitudeLeft', 'PageUp': 'zoomIn', 'PageDown': 'zoomOut', '+': 'zoomIn', '-': 'zoomOut', ' ': 'toggleAutorotate' }在视图全屏时启用和配置键盘导航。讲人话就是在视图全屏时的键盘快捷键配置。 viewer.setOption('fisheye', true); setOptions(options)更改多个Viewer的配置项，其中某些配置项不能被改变。配置项参考setOption()的附带配置表。 viewer.setOption({ fisheye： true, defaultZoomLvl: 60 }); setPanorama(path, options)加载新的全景文件，可以选择更改相机位置/缩放并激活过渡动画。如果“相机”选项未定义，则“相机”选项将不继续移动。如果另一个全景文件加载已经在进行中，它将被中止。 NameTypeDescriptionpathstring|Array|PSV.Cubemap全景图文件的地址optionsobject: PanoramaOptions NameTypeArgumentDefaultDesctiptiontransitionboolean | number1500所有全景和新全景之间过渡的持续时间showLoaderbooleantrueshow the loadersphereCorrectionobject应用于全景的新球体校正panoDataobject新全景图的panoData由于该Api亲测无效，具体内容就不展开了。之后看看官网会不会更新。 showError(message)在视图的最上层显示错误信息遮罩层。 NameTypeDescriptionmessagestring viewer.showError('我是一段错误信息'); hideError()隐藏错误信息。 viewer.hideError(); startAutorotate()启用全景自动旋转。 viewer.startAutorotate(); stopAutorotate()停止全景自动旋转。 viewer.stopAutorotate(); startKeyboardControl()启用键盘控件，即可以使用键盘快捷键进行全景图一些动作操作。（在全景图进入全屏模式时会自动开启键盘控件）。 viewer.startKeyboardControl(); stopKeyboardControl()禁用键盘控件。（在全屏模式退出时也会自动禁用键盘控件） viewer.stopKeyboardControl() toggleAutorotate()开始或停止全景图自动旋转。当全景图在旋转时则停止，当全景图不旋转时则开启旋转。 viewer.toggleAutorotate(); toggleFullscreen()进入或退出全屏模式。当全景图开启全屏时则退出全屏，当全景图非全屏时则进入全屏模式。 viewer.toggleFullscreen(); zoom(level) NameTypeDescriptionlevelnumber缩放层级进行调整，层级数介于0-100之间 viewer.zoom(100); zoomIn()层级缩放+1。 viewer.zoomIn(); zoomOut()层级缩放-1。 viewer.zoomOut(); |
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |